import React, { memo } from 'react'
import { LeftWrapper } from './style'
import IconLogo from '@/assets/svg/icon_logo'
import { useNavigate } from 'react-router-dom'

const HeaderLeft = memo(() => {
  const navigate = useNavigate()

  function handleLogoClick() {
    navigate('/home')
  }

  return (
    <LeftWrapper>
      <div className="logo" onClick={handleLogoClick}>
        {/* 将 SVG 代码抽取到组件中 */}
        {/* svg 文件体积较小,通过抽取组件的方式,可以将 svg 内容直接嵌入到网页中,不需要二次请求 */}
        <IconLogo />
      </div>
    </LeftWrapper>
  )
})

export default HeaderLeft
